Обращение к элементам DOM
Опубликовано: 27.12.2017
Основное назначение JavaScript - это работа с элементами страницы. Используя объектную модель документа, можно обратиться к любому элементу страницы.
Встроенные свойства и методы объекта document позволяют найти любой элемент на странице и произвести с ним необходимые действия. Например, у каждого элемента есть свойство style , которое позволяет изменять CSS-стили элемента.
Для обращения к любому элементу страницы в DOM интерфейсе введены специальные поисковые методы. Поиск может осуществляется по разным параметрам элементов, поэтому с помощью них можно найти любой элемент.
Полное руководство по пришельцам. Чего ожидать? Виды разумных цивилизаций. С точки зрения науки
getElementById()
Объект document имеет встроенный метод getElementById(). Он выполняет поиск элемента по его уникальному идентификатору id .
document.getElementById(идентификатор) идентификатор Строка, содержащая уникальный идентификатор. <html> <head> <title>DOM интерфейс</title> </head> <body> <p>Lorem ipsum dolor...</p> <p id="last_paragraph">Deleniti sit veniam...</p> </body> </html> <script> var elem = document.getElementById('last_paragraph'); elem.style.background = '#599'; </script>Lorem ipsum dolor...
Предопределенные элементы в 1С
Deleniti sit veniam...
При отображении страницы браузер автоматически создаёт глобальные свойства со ссылками на элементы, для которых указан уникальный идентификатор. Именами свойств являются сами идентификаторы. Таким образом, в JavaScript есть возможность быстрого обращения к элементу по его id.
<html> <head> <title>DOM интерфейс</title> </head> <body> <p id="first_paragraph">Lorem ipsum dolor...</p> <p id="last_paragraph">Deleniti sit veniam...</p> </body> </html> <script> window['first_paragraph'].style.background = 'gray'; /* или */ last_paragraph.style.background = '#599'; </script>Lorem ipsum dolor...
Deleniti sit veniam...
Оперирование глобальными переменными может привести к ошибкам в программе. Более правильным является использование document.getElementById().